<template>
  <div class="user-info-container">
    <div class="header">
      <span class="username">{{userInfo.name}}</span>欢迎您！
    </div>
    <ul class="info">
      <li class="info-header">基本信息</li>
      <li>
        <span>登录账号：</span>
        <span>{{userInfo.account}}</span>
      </li>
      <li>
        <span>用户积分：</span>
        <span>{{userInfo.balance}}</span>
      </li>
      <li>
        <span>可用余额：</span>
        <span>
          <b class="money">
            {{userInfo.balance}}
          </b>
          元 | <b class="recharge" @click="toRecharge">充值</b>
        </span>
      </li>
      <li>
        <span>冻结金额：</span>
        <span class="money">{{userInfo.freeze_money}}元</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'UserInfo',
  computed: {
    ...mapState({
      userInfo: state => state.userInfo || {},
      eventBus: state => state.eventBus
    })
  },
  methods: {
    toRecharge() {
      this.eventBus.$emit('recharge', '充值');
    }
  }
};
</script>

<style lang="less">
  .user-info-container {
    .header {
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      background-color: #ddd;
      .username {
        margin-right: 10px;
      }
    }
    .info {
      padding: 10px;
      li {
        display: flex;
        height: 40px;
        align-items: center;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        span {
          flex: 1;
          padding: 0 0 0 20px;
          height: 40px;
          line-height: 40px;
          border-right: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          &:nth-of-type(1) {
            padding: 0 20px 0 0;
            flex: 0 0 150px;
            text-align: right;
          }
        }
        .money {
          color: red;
        }
        .recharge {
          color: #297aa3;
          &:hover {
            cursor: pointer;
            opacity: .8;
          }
        }
      }
      .info-header {
        justify-content: center;
        background-color: #ddd;
      }
    }
  }
</style>
